<template>
  <view class="contain_editaccount">
    <view class="account_del">
      <nut-form :model-value="formData">
        <view class="rows">
          <nut-form-item label="账户类型" label-align="left" required>
            <nut-radio-group direction="horizontal" v-model="formData.accountType">
              <nut-radio label="1">个人账户</nut-radio>
              <nut-radio label="2">企业账户</nut-radio>
            </nut-radio-group>
          </nut-form-item>
        </view>
        <view class="rows">
          <nut-form-item label="银行卡号" label-align="left" required>
            <nut-input
              v-model="formData.accountNo"
              placeholder="请填写银行卡号"
              :border="false"
            />
          </nut-form-item>
        </view>
        <view class="rows">
          <nut-form-item label="开户名" label-align="left" required>
            <nut-input
              v-model="formData.accountName"
              placeholder="请填写开户名"
              :border="false"
            />
          </nut-form-item>
        </view>
        <view class="rows">
          <nut-form-item label="开户行" label-align="left" required>
            <view @click="chooseBank" class="chooseBank">{{ formData.bankName || '请选择开户行' }}</view>
          </nut-form-item>
        </view>
        <view class="footRows">
          <view class="default_acount">
            <nut-checkbox v-model="formData.isDefault" label="复选框"
              >设为默认账户</nut-checkbox>
          </view>
          <view class="clear" @click="doClear">
            <image class="img" src="../../assets/images/index/icon_clean.png"></image>
            <text>清空当前</text>
          </view>
        </view>
      </nut-form>
    </view>
    <view class="save_edit_account" @click="save">确定</view>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { ref } from "vue";
import { useDidShow, useRouter  } from "@tarojs/taro";
import logisticsInfoStore from "@/store/logistics";
import useUserInfoStore from "@/store/user";
import bankAccountInfoStore from "@/store/bankAccount";
import { $get, $post } from "@/@api/index";
import { Del2 } from "@nutui/icons-vue-taro";

const userStore = useUserInfoStore();
const bankAccountStore = bankAccountInfoStore()
const router = useRouter();
const formData = ref<FormData>({
  btcaId: "",
  customerCode: "",
  type: "",
  accountName: "",
  accountNo: "",
  bankName: "",
  accountType: "",
  isDefault: false,
});

if (!!bankAccountStore.info?.btcaId) {
  Taro.setNavigationBarTitle({title:'编辑银行账户'})
  formData.value = {
    btcaId: bankAccountStore.info?.btcaId,
    customerCode: userStore.userInfo.customerCode,
    type: '1',
    accountName: bankAccountStore.info?.accountName,
    accountNo: bankAccountStore.info?.accountNo,
    bankName: bankAccountStore.info?.bankName,
    accountType: bankAccountStore.info.accountType == 1 ? '1' : '2',
    isDefault: bankAccountStore.info?.isDefault == 1 ? true : false,
  };
}

// 选择开户行
const chooseBank = ()=>{
  Taro.navigateTo({
    url: "/pages/myBankAccount/bank",
  });
}

useDidShow(()=>{
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1]
  if (currPage.__data__.khName) {
    formData.value.bankName = currPage.__data__.khName
  }
})




// 清空当前
function doClear() {
  formData.value = {
    btcaId: "",
    customerCode: "",
    type: "",
    accountName: "",
    accountNo: "",
    bankName: "",
    accountType: "",
    isDefault: false
  };
}


// 保存地址
async function save() {
  if (formData.value.accountType == '') {
    return Taro.showToast({
      icon: "none",
      title: "请选择账户类型",
    })
  }
  if (formData.value.accountName == '') {
    return Taro.showToast({
      icon: "none",
      title: "请填写开户名",
    })
  }
  if (formData.value.accountNo == '') {
    return Taro.showToast({
      icon: "none",
      title: "请填写银行卡号",
    })
  }
  if (formData.value.bankName == '') {
    return Taro.showToast({
      icon: "none",
      title: "请选择开户行",
    })
  }
  if(!/^(62|88)\d{14,15}$/.test(formData.value.accountNo) && !/^(62|88)\d{17,18}$/.test(formData.value.accountNo)){
    return Taro.showToast({
      icon: "none",
      title: "请填写正确的银行卡号",
    })
  }
  let postData = {
    ...formData.value,
    customerCode: userStore.userInfo.customerCode,
    type: '1',
    isDefault: formData.value.isDefault ? '1':'0',
  }
  if(!postData.btcaId){
    delete postData.btcaId
  }
  const res: any = await $post(
      "/selfmachine-system/account/addOrUpdate",
      postData
  )
  if(res.data.code === 200){
    Taro.showToast({
      icon: "success",
      title: "保存成功",
    })
    Taro.navigateBack()
  }



}
</script>

<style lang="scss">
.contain_editaccount {
  background-color: #f4f5f6;
  padding-top: 16rpx;
  box-sizing: border-box;
  padding-bottom: 50rpx;
  height: 100vh;
  .account_del {
    border-radius: 24rpx;
    background-color: white;
    height: 520rpx;
    width: 702rpx;
    margin-left: 24rpx;
    margin-top: 16rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    .footRows {
      width: 702rpx;
      height: 104rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .default_acount {
        display: flex;
        justify-content: space-between;
        height: 50rpx;
        align-items: center;
        .nut-checkbox__label {
          margin-left: 10rpx;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #666666;
        }
      }

      .clear {
        margin-right: 50rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        text {
          margin-left: 12rpx;
          font-size: 24rpx;
          color: #666;
        }
        .img {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .rows {
      width: 100%;
      height: 103rpx;
      border-bottom: 1rpx solid #f4f5f6;
      display: flex;
      align-items: center;
      .nut-form-item__label {
        font-family: PingFang SC Medium;
        font-size: 28rpx;
        color: #666;
      }
      .nut-input {
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #666;
      }
      .nut-cell {
        padding: 0;
      }
    }
  }
  .input {
    padding: 40rpx;
    border-bottom: 1px solid #ccc;
  }



  .save_edit_account {
    position: fixed;
    bottom: 40rpx;
    width: 80%;
    height: 80rpx;
    left: 10%;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
  }

  .get_address {
    display: flex;
    border-bottom: 1px solid #ccc;

    .address_Input {
      flex: 1;
      padding: 40rpx;
      border-bottom: none;
    }
  }
}

.chooseBank {
  padding-left: 8rpx;
  color: #666;
}
</style>
